
<template>
    <LoginLayout>
        <div class="box-grow-1 dir-top-nowrap">
            <div class="box-grow-0 biaoti">注册</div>
            <div class="box-grow-1 dir-top-nowrap cont">
                <div>
                    <NuxtLink to="/">
                        <img class="logo" src="/imgs/logo.png" />
                    </NuxtLink>
                    <div class="dir-top-nowrap gap srk">
                        <div>
                            <input class="input" type="text" v-model="form.username" placeholder="请输入用户名" />
                        </div>
                        <div>
                            <input class="input" type="text" v-model="form.email" placeholder="请输入邮箱" />
                        </div>
                        <div class="dir-left-nowrap gap">
                            <input class="input" type="text" v-model="form.code" placeholder="验证码" />
                            <div class="box-grow-0 main-center cross-center jieshou" @click="sendCode"> 发送验证码 </div>
                        </div>
                        <div>
                            <input class="input" type="password" v-model="form.password" placeholder="请输入密码" />
                        </div>
                        <div>
                            <input class="input" type="password" v-model="form.repeatPassword" placeholder="再次请输入密码" />
                        </div>
                        <div class="dir-left-nowrap gap">
                            <NuxtLink :to="{ name: 'login' }" class="box-grow-0 main-center cross-center back">
                                <AppIcon icon="Left"></AppIcon>
                            </NuxtLink>
                            <div class="box-grow-1 main-center cross-center submit" @click="submit">注册</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </LoginLayout>
</template>

<script setup>
import { AppIcon, NuxtLink } from "#components";
import { register } from "@/api";

definePageMeta({
    layout: false,
})

const form = ref({
    username: '',
    password: '',
    repeatPassword: '',
    email: '',
    code: '',
})

/**
 * 提交注册
 */
async function submit() {
    const res = await register(form.value)
    if (res.code != Code.success) {
        return console.log(res.msg);
    }
    console.log(res.msg);
    navigateTo('/')
}

/**
 * 发送验证码
 */
function sendCode() {
    console.log('发送验证码');
}
</script>

<style lang="scss" scoped>
.biaoti {
    font-size: 25px;
    font-weight: 600;
    color: #333333;
}

.cont {
    text-align: center;

    .logo {
        width: 177px;
        height: 76px;
        vertical-align: middle;
        margin-bottom: 20px;
    }

    .srk {
        padding: 0 50px;

        .input {
            width: 100%;
            height: 40px;
            background: #F5F5F5;
            border-radius: 6px;
            border: 0;
            padding: 0 10px;
        }

        .jieshou {
            cursor: pointer;
            background: #fff;
            border: 1px solid #F9688F;
            color: #F9688F;
            text-align: center;
            border-radius: 5px;
            padding: 0 10px;
        }

        .submit {
            color: #fff;
            background: #f86a8e;
            text-align: center;
            margin-bottom: 0;
            height: 40px;
            border-radius: 6px;
            padding: 0 20px;
        }

        .back {
            padding: 0 20px;
            border: 1px solid #F9688F;
            color: #F9688F;
            text-align: center;
            margin-bottom: 0;
            height: 40px;
            border-radius: 6px;
            vertical-align: middle;
        }

        .wjmm {
            margin-top: 13px;
            font-size: 12px;

            .l {
                a {
                    color: #F9688F;
                }
            }

            .r {
                a {
                    margin-left: 5px;
                    color: #F9688F;
                }
            }
        }

    }
}
</style>